<template>
	<div class="tuijian w944">
		<div class="label_top">
			<p><i class="line"></i>课程推荐</p>
		</div>
		<div class="label_table">
			<alert ref="alert"></alert>
			<div class="el-tabs-report">
				<a class="listOne" @click="goaddtuijian" v-if="tuijian.kctj_add">新增推荐</a>
				<el-select v-model="permission" @change="getTableList" class="th_3" v-if="isOpen==1">
					<el-option label="课程权限" value=""></el-option>
					<el-option v-for="item in permissionArr" :key="item.id" :label="item.name" :value="item.name"></el-option>
				</el-select>
				<el-cascader v-model="searchSelect" :options="options" :props="optionProps" :show-all-levels='false' filterable placeholder="课程分类" @change="getTableList" class="th_2">
				</el-cascader>
				<div class="msearch">
					<input placeholder="请输入课程、讲师名字..." v-model="search" />
					<a @click="getTableList"><img src="../../assets/qudaoImg/search.png" /></a>
				</div>
			</div>
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column type="selection"></el-table-column>
				<el-table-column prop="courseName" label="课程名称"></el-table-column>
				<el-table-column prop="nickname" label="讲师" width="140"></el-table-column>
				<el-table-column label="操作" width="120">
					<template slot-scope="scope">
						<el-button @click="cancelTuijian(scope.row)" v-if="tuijian.kctj_cancel" class="red">取消推荐</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
				<el-button @click="cancelTuijianAll" class="allDelete" v-if="tuijian.kctj_cancelAll">批量取消推荐</el-button>
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import alert from '../../components/Alert.vue';
	export default {
		data() {
			return {
				isOpen:'',
				tuijian:'',
				search: '',
				tableData: [],
				pagesize: 15,
				currentpage: 1,
				total: 1,
				courseType: '',
				multipleSelection: [],
				searchSelect: [],
				permission:'',
				permissionArr:[],
				options: [],
				optionProps: {
                    value: 'id',
                    label: 'columnName',
                    children: 'childList'
                }
			}
		},
		methods: {
			getTableList() {
				var s={
				    page: this.currentpage,
					num: this.pagesize,
					fuzzyFields: this.search,
					courseRecommend:1,
					courseWatchPer:this.permission,
					rootcompanyid:1,
					courseType:1
                };
				if(this.searchSelect!=null && this.searchSelect.length >= 2){
                	s.courseColumnYi = this.searchSelect[0];
					s.courseColumn = this.searchSelect[1];
                };
				this.$ajax({
					url: this.$root.jifuUrl + "/mns/kcCourse/selectKcCourseListV2",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'POST',
					data: s,
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.pageList.list;
							this.total=res.data.data.pageList.pageParam.items;
							this.isOpen = res.data.data.isopen;
						}
					}
				});
			},
			cancelTuijian(row) {
				var list = [];
				list.push({id:row.id,courseRecommend:0});
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/kcCourse/cancelRecommendKcCourse",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data:list,
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().cancelTuijianResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			cancelTuijianAll() {
				this.$ajax({ 
					url: this.$root.jifuUrl + "/mns/kcCourse/cancelRecommendKcCourse",
					headers:{'ContentType': 'application/json; charset=utf-8'},
					method: 'PUT',
					data:this.multipleSelection,
					success: res => {
						if(res.data.code == 200) {
							this.$rootFunction().cancelTuijianResSuccess();
						}else{
							this.failText = res.data.message;
							this.$rootFunction().deleteResFail();
						}
					}
				});
			},
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
					})
					this.allSelect = !this.allSelect;
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = [];
				for(var i = 0;i<val.length;i++){
					var s={
						id:val[i].id,
						courseRecommend:0
					}
					this.multipleSelection.push(s)
				}
			},
			getTreeData(data){
				for(var i=0;i<data.length;i++){
					if(data[i].childList.length<1){
						data[i].childList=undefined;
					}else {
						this.getTreeData(data[i].childList);
					}
				}
				return data;
        	},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getTableList();
			},
			goaddtuijian() {
				this.$router.push({
					path: '/addtuijian'
				})
			},
			importDaoChu(){
				
			},
			getColumnList(){
				let columnType = [1];
				this.$rootFunction().columnList({columnType});
			},
			getTagType(){
				let tagType = 4;
				this.$rootFunction().tagType({tagType});
			}
		},
		components: {
			alert
		},
		mounted: function() {
			this.getTableList();
			this.getColumnList();
			this.getTagType();
			this.tuijian = this.$root.huasan.tuijian;
		}
	}
</script>